<template>
  <div class="bigbox">
    <div class="table" v-if="isshow">
      <div class="topbox">
        <el-form ref="form" label-width="80px" label-position="left">
          <el-row :gutter="20">
            <el-col :span="5">
              <el-form-item label="企业">
                <FilterSelect2
                  v-model="orgNo"
                  :optionlist="qiyelist"
                  :valuekey="{ name: 'bizOrgName',value: 'bizOrgNo' }"
                ></FilterSelect2>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="填报时间">
                <el-date-picker
                  v-model="value1"
                  type="datetimerange"
                  size="small"
                  range-separator="-"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="11" style="text-align: right">
              <el-form-item label="">
                <el-button size="small" @click="chongzhi">重 置</el-button>
                <el-button type="primary" size="small" @click="gettablelist"
                  >查 询</el-button
                >
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="bodybox">
        <TopTitle @command="command" @daochu="daochu" @shuaxin="gettablelist">
          <template #otherbutton>
            <el-button type="primary" size="small" @click="isshow = false"
              >新增报表</el-button
            >
          </template>
        </TopTitle>
        <div class="table">
          <TableColumn
            :issize="iissize"
            ref="tabledata"
            :tableData="tableData"
            :tableConfig="tableConfig"
          >
            <el-table-column label="操作">
              <template #default="{ row }">
                <div>
                  <el-link
                    type="primary"
                    :underline="false"
                    @click="tolook(row,true,false)"
                    >浏览</el-link
                  >
                  <el-link type="primary" :underline="false" class="link"
                  @click="tolook(row,true,true)"
                    >编辑</el-link
                  >
                  <el-link type="danger" @click="del(row)" :underline="false">删除</el-link>
                </div>
              </template>
            </el-table-column>
          </TableColumn>
        </div>
        <div class="fenye">
          <el-pagination
            background
            layout="prev, pager, next"
            :current-page.sync="pageNo"
            @current-change="gettablelist"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <AddReport v-else @goback="goback" :qiyelist="qiyelist" ref="AddReportrefs"></AddReport>
  </div>
</template>
<script>
import {getConsumptionListapip,delReportAddai,getBaseBuapi} from '@/api/ElectricalDistribution/energy-report'
import { getceshijiekou } from '@/api/ElectricalDistribution/dayreport'
import dayjs from 'dayjs'
import AddReport from './add-report.vue'
import TopTitle from '@/components/TopTitle/newtitle.vue'
import TableColumn from '@/components/Table'
import { exportexcel } from '@/utils/excel'
export default {
  name: 'CallPoliceIndex',
  components: {
    TopTitle,
    AddReport,
    TableColumn
  },
  data() {
    return {
      total:0,
      pageNo:0,
      pageSize:15,
      isshow: true,
      value1: ['',''],
      orgNo: '',
      qiyelist: [],
      iissize: 'medium',
      tableData: [],
      tableConfig: [
        { label: '序号', type: 'index', width: '100', center: 'center' },
        { label: '企业名称', prop: 'companyName' },
        { label: '报表填报时间', prop: 'createDate' },
        { label: '报表名称', prop: 'reportName' },
        { label: '油品名称', prop: 'oilName' },
        { label: '总电量(kWh)', prop: 'totalElectricity' },
        { label: '总输油量(吨)', prop: 'oilTotal' },
      ]
    }
  },

  async mounted() {
    this.gettime()
    const {data: { list }} = await getceshijiekou()
    this.qiyelist = list
    this.$set(this,'orgNo',this.qiyelist[0]?.bizOrgNo)
    this.gettablelist()
  },

  methods: {
    // 获取列表数据
    async gettablelist() {
      const pageNo=this.pageNo?this.pageNo-1:this.pageNo
      const {data:{list,totalCount}}=await getConsumptionListapip({orgNo:this.orgNo,pageNo,pageSize:this.pageSize,
        fromDate:this.value1?this.value1[0]:'',toDate:this.value1?this.value1[1]:''
      })
      this.tableData=list
      this.total=totalCount
    },
    // 删除
    del (item) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res= await delReportAddai(item.id)
          this.$message({
            type:res.code=='200'?'success':'warning',
            message:res.code=='200'?'删除成功':res.message
          })
          this.gettablelist()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    //新增返回
    goback(){
      this.isshow = true
      this.gettablelist()
    },
    async tolook(row,flag,look) {
      this.isshow=false
      setTimeout(()=>this.$refs.AddReportrefs.toinfo(row,flag,look),100)
    },
    // 重置
    chongzhi() {
      this.$set(this,'orgNo',this.qiyelist[0]?.bizOrgNo)
      this.gettime()
      this.gettablelist()
    },
    // 导出
    daochu() {
      exportexcel(
        '/pio-microservice-biz/pio/energy/device/consumption/report/page/exportExcel',
        {
          orgNo:this.orgNo,fromDate:this.value1?this.value1[0]:'',toDate:this.value1?this.value1[1]:''
        },
        '能耗报表'
      )
    },
    gettime() {
      this.value1 = [
        dayjs().format('YYYY-MM') + '-' + '01'+' '+'00:00:00',
        dayjs().format('YYYY-MM-DD HH:mm:ss')
      ]
    },
    // 表格密度调节
    command(val) {
      this.iissize = val
    }
  }
}
</script>
<style scoped lang="scss">
.bigbox {
  height: 100%;
  padding: 10px;
  background-color: #f1f1f1;
  .table {
    height: 100%;
  }
  .topbox {
    height: 80px;
    background-color: #fff;
    margin-bottom: 10px;
    padding: 20px;
  }
  .bodybox {
    height: calc(100% - 90px);
    background-color: #fff;
    padding: 20px;
    .table {
      height: calc(100% - 77px);
      .link {
        margin: 0 20px;
      }
    }
    .fenye{
      text-align: right;
      margin-top: 10px;
    }
  }
}
</style>
